<template>
  <div class="main">
    <div class="inputs">
      <el-form ref="Form" label-width="110px">
        <div class="row">
          <el-form-item label="任务编号:">
            <el-input v-model="pageParams.id" style="width: 350px;" placeholder="请输入任务编号" />
          </el-form-item>
          <el-form-item label="任务分配状态:">
            <el-select v-model="pageParams.assignedStatus" placeholder="请选择" style="width: 350px;">
              <el-option
                v-for="item in carOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="满载状态:">
            <el-select v-model="pageParams.loadingStatus" placeholder="请选择" style="width: 350px;">
              <el-option
                v-for="item in loadingOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="row">

          <el-form-item label="车牌号码:">
            <el-input v-model="pageParams.licensePlate" style="width: 350px;" placeholder="请输入任务编号" />
          </el-form-item>
          <el-form-item label="起始地机构:">
            <!-- <el-input style="width: 350px;" /> -->
            <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
            <el-select ref="selectTree" v-model="selectValue" class="main-select-tree select" style="width: 350px;" placeholder="请选择起始地机构">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目的地机构:">
            <!-- <el-input style="width: 350px;" /> -->
            <el-select ref="destination" v-model="destination " class="main-select-tree select" style="width: 350px;" placeholder="请选择目的地机构">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value1" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue1"
              />
            </el-select>
          </el-form-item>

        </div>
        <div class="btn">
          <el-button type="danger" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form>
    </div>
    <ul class="tab">
      <li :class="{active:activeTab===0}" @click="tabSearch(0)">全部{{ totalList }}</li>
      <li :class="{active:activeTab===1}" @click="tabSearch(1)">待提货{{ overData[1] }}</li>
      <li :class="{active:activeTab===2}" @click="tabSearch(2)">进行中{{ overData[2] }}</li>
      <li :class="{active:activeTab===4}" @click="tabSearch(4)">已完成{{ overData[4] }}</li>
      <li :class="{active:activeTab===5}" @click="tabSearch(5)">已取消{{ overData[5] }}</li>
    </ul>
    <div class="table">
      <div class="bader">
        <el-table :header-cell-style="{background:'#f8faff'}" :data="tableData" size="mini" stripe>
          <el-table-column
            label="序号"
            type="index"
            :index="index"
            width="60"
          />
          <el-table-column
            label="运输任务编号"
            prop="id"
            width="170"
          />
          <el-table-column
            label="车牌号码"
            prop="truck.licensePlate"
          />
          <el-table-column
            label="起始地"
            prop="startAgency.name"
          />
          <el-table-column
            label="目的地"
            prop="endAgency.name"
          />
          <el-table-column
            label="运输任务状态"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1">待执行</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">待确定</span>
              <span v-else-if="row.status===4">已完成</span>
              <span v-else-if="row.status===5">已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            label="车辆满载状态"
          >
            <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-if="row.loadingStatus===2">满载</span>
              <span v-if="row.loadingStatus===3">空载</span>
            </template>
          </el-table-column>
          <el-table-column
            label="任务分配状态"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-else>待人工分配</span>
            </template>
          </el-table-column>
          <el-table-column
            label="计划发车时间"
            width="170"
            prop="planDepartureTime"
          />
          <el-table-column
            label="实际发车时间"
            width="170"
            prop="actualDepartureTime"
          />
          <el-table-column
            label="更新时间"
            width="170"
            prop="updated"
          />
          <el-table-column
            label="操作"
            width="160"
            fixed="right"
          >
            <template v-slot="{row}">
              <el-button type="text" style="color: #69c4fc;">查看</el-button>
              <el-button :disabled="row.status==4||row.status==5" type="text" @click="del">取消</el-button>
              <el-button :disabled="row.status==4||row.status==5" type="text" class="text" @click="editShow=true;editForm.a=row.id">手动调整</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <div>
              <img class="nullImg" :src="imgUrl" alt="">
              <span class="nullText">{{ isSearch?'这里空空如也':'没有找到您要的内容哦~' }}</span>
            </div>
          </template>
        </el-table>
      </div>
      <div v-if="total" class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="bdrd">
      <el-dialog title="手动调整" :visible.sync="editShow" width="30%">
        <el-form ref="Form" label-width="100px" :model="editForm">
          <el-form-item label="任务编号：">
            <el-input v-model="editForm.a" />
          </el-form-item>
          <el-form-item label="运单数量：">
            <el-input v-model="editForm.b" />
          </el-form-item>
          <el-form-item label="选择车次：">
            <el-select v-model="editForm.c" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in carNamber"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择车辆：">
            <el-select v-model="editForm.d" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in car"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;justify-content: center;">
            <el-button type="primary" style="margin-right: 20px;" @click="$message.error('很抱歉，演示数据不能修改！')">确定</el-button>
            <el-button @click="editShow=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { getTree } from '@/api/selectTree'
import { getDriverList, getOverviewData, getTaskPage } from '@/api/task'
export default {
  data() {
    return {
      editForm: {
        a: '',
        b: '',
        c: '',
        d: ''
      },
      car: [],
      carNamber: [
        { name: '0001', id: 1 },
        { name: '0002', id: 2 }
      ],
      editShow: false,
      total: 1,
      tableData: [],
      pageParams: {
        assignedStatus: '',
        endAgencyId: '',
        id: '',
        licensePlate: '',
        loadingStatus: '',
        page: 1,
        pageSize: 10,
        planArrivaTime: '',
        truckId: '',
        startAgencyId: '',
        status: ''
      },
      activeTab: 0,
      value: 11,
      value1: 11,
      form: {
        car: '',
        task: '',
        time: [],
        loadingStatus: ''
      },
      destination: '',
      selectValue: '',
      treeData: [],
      imgUrl: 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png',
      isSearch: true,
      carOptions: [
        { label: '已分配', value: '2' },
        { label: '待人工分配', value: '3' }
      ],
      loadingOption: [
        { label: '半载', value: '1' },
        { label: '满载', value: '2' },
        { label: '空载', value: '3' }

      ],
      overData: []
    }
  },
  computed: {
    index() {
      return this.pageParams.page * this.pageParams.pageSize - this.pageParams.pageSize + 1
    },
    totalList() {
      let sum = 0
      for (const key in this.overData) {
        sum += +this.overData[key]
      }
      return sum
    }
  },
  async created() {
    const { data } = await getTree()
    this.treeData = JSON.parse(data)
    this.getList()
    const res = await getDriverList()
    console.log(res)
    this.car = res.data
  },
  methods: {
    tabSearch(id) {
      this.activeTab = id
      this.pageParams.page = 1
      if (id) {
        this.pageParams.status = id
      } else {
        this.pageParams.status = ''
      }
      this.getList()
    },
    async search() {
      this.getList()
      setTimeout(() => {
        if (!this.tableData.id) {
          this.isSearch = false
          this.imgUrl = 'https://slwl-admin.itheima.net/static/img/icon-empty.3abd3b9a.png'
        }
      }, 0)
    },
    reset() {
      this.isSearch = true
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png'
      this.destination = ''
      this.selectValue = ''
      this.pageParams.startAgencyId = ''
      this.pageParams.assignedStatus = ''
      this.pageParams.loadingStatus = ''
      this.pageParams.licensePlate = ''
      this.pageParams.startAgencyId = ''
      this.pageParams.endAgencyId = ''
      this.getList()
    },

    hasValue(row) {
      // this.courier.agentId = row.id
      console.log(row.name)
      this.selectValue = row.name
      this.pageParams.startAgencyId = row.id
      this.$refs.selectTree.blur()
    },
    hasValue1(row) {
      // this.courier.agentId = row.id
      this.pageParams.endAgencyId = row.id
      this.destination = row.name
      this.$refs.destination.blur()
    },
    async getList() {
      const res = await getTaskPage(this.pageParams)
      this.total = +res.data.counts
      // this.pageParams.pageSize = res.data.pageSize
      this.tableData = res.data.items
      const { data } = await getOverviewData()
      this.overData = data
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getList()
    },
    del() {
      this.$confirm('确定取消此运输任务吗', '取消确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'error',
          message: '很抱歉演示数据不允许修改!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }

  }

}
</script>

<style scoped>
.text{
  color: #69c4fc;
}
.inputs{
    border-radius: 10px;
    background-color: #fff;
    padding:20px 40px 20px 10px;

}
.table{
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.row{
  display: flex;
  justify-content: space-between;
}
.btn{
  /* width: 460px; */
  margin-left: 40px;
}
.bader{
  border: 1px solid #eef0f6;

}
.nullImg{
  margin-top: 20px;
    width: 25%;
    height: 25%;
}
.nullText{
  display: block;
  margin-bottom: 25px;
}
.tab{
  list-style: none;
  height: 50px;
  background-color: #fff;
  display: flex;
  padding: 0;
}
.tab li{
  line-height: 50px;
  text-align: center;
  width: 100px;
  height: 100%;
}
 .active{
  background-color: #ffeeeb;
  color: #e15536;
}
.page{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
::v-deep .el-dialog__header{
  background-color: #f3f4f7;
}
.el-button:disabled{
  color: #cfd4e3;
}
</style>
